<template>
	<div class="container">		
		<div class="status row">
			<div class="col"><select id="group_res_type_id" class="form-control custom-select" v-model="res_type_id" @change="initalData">
                    <option v-for="resType in resTypes" v-bind:value="resType.id">{{ resType.name }}</option>
            </select></div>
			<div class="col-6">	
				<div v-if="msg!=null" class="alert alert-primary" role="alert">
				  {{msg}}
				</div>		
				<draggable v-model="myArray" :move="getdata" @update="datadragEnd" element="ul" class="list-group" @end="endDrag" :options="{group:'menu',draggable:'.item'}">
				        <li v-for="element in myArray" :key="element.id"  class="list-group-item item"><span v-text="element.name"></span>
			                <draggable v-model="element.childrens" :move="getdata" @update="datadragEnd" @end="endDrag" class="dragArea list-group" :options="{group:'menu',draggable:'.child-item'}" element="ul">
			                		<li v-for="ele in element.childrens" :key="ele.id" class="list-group-item child-item">
			                			{{ele.name}}
			                		</li>
			                </draggable>
			  			</li>
				</draggable>
			</div>
			<div class="col"><button v-if="res_type_id!=null" type="button" class="btn btn-primary" v-on:click="SaveMenu()">保存</button></div>
		</div>
	</div>
</template>
<style type="text/css">
.dragArea{clear:left;min-height:50px;margin-left:15px;border:1px dashed silver;}	
.sortable-chosen .dragArea{display:none;}
.list-group-item{cursor:move;transition: all 1s;margin:1px;}
.list-group-item span{line-height: 50px; height: 50px; display: block; background-color: snow; text-indent: 1em; border: 1px solid #EEE; margin-bottom: 2px;}
</style>
<script>
	import draggable from 'vuedraggable'
    export default {
    	components:{
    		draggable,
    	},
    	data(){
    		return {
    			myArray:[],
    			targetElement: null,
    			msg:null,
    			res_type_id:null,
    			resTypes:[],
    			canDrag:null,
				futureIndex:null
    		}
    	},
        mounted() {
            console.log('Component mounted.')
            this.initalData();
        },
        methods: {  
        	privateCheckMove: function(evt){
			    this.targetElement = evt.relatedContext.element

			    if(evt.draggedContext.element.childrens.length>0){		    	
			    	if(this.targetElement!=null){
				    	for (var i = this.myArray.length - 1; i >= 0; i--) {
				    		if(this.targetElement.id===this.myArray[i].id){
				    			this.msg='目标是主菜单'+this.targetElement.name;
				    			return true;
				    		}
				    		var childrens=this.myArray[i].childrens;				    		
				    		if(childrens.length>0){
				    			for (var i = childrens.length - 1; i >= 0; i--) {
				    				if(childrens[i].id===this.targetElement.id){
				    					this.msg='目标是子菜单'+this.targetElement.name;
				    					return false;
				    				}
				    			}
				    		}
				    	}
				    }else{
				    	this.msg='目标为空';
			    		return false;
				    }
			    }
			    

				return true;
			},
        	initalData: function(){
        		var url='/rbac/resource/apiMenuIndex'
        		var that=this;
                axios.get(url,{params:{res_type_id:that.res_type_id}})
                 .then(function (response) {              
                    that.myArray=response.data.resources;  
                    that.resTypes=response.data.resTypes;     
                    that.res_type_id=response.data.res_type_id;        
                 })
                 .catch(function (error) {
                    console.log(error);
                 });
        	},
            getdata: function(evt){
                var res = this.privateCheckMove(evt)
				this.canDrag=res;
				this.futureIndex = evt.draggedContext.futureIndex;
				return res;
            },
            datadragEnd:function(evt){

                console.log('拖动前的索引：'+evt.oldIndex);
                console.log('拖动后的索引：'+evt.newIndex);

               	for (var i = 0; i <= this.myArray.length - 1; i++) {
               		console.log(this.myArray[i].id);
               	}
                
            },
            endDrag: function () {
				this.canDrag=null;
				this.targetElement=null;
				this.futureIndex =null;
				this.msg=null;
			},
			SaveMenu: function(){
				var that=this;
				axios.post('/rbac/resource/apiStoreMenu', {
                    data:that.myArray
                  })
                  .then(function (response) { 
                  	that.msg='保存成功!';
                    console.log(response.status);
                    setTimeout(function(){
                    	that.msg=null;
                    },2000);
                  })
                  .catch(function (error) {
                    console.log(error);
                  });

			}
        }
    }
</script>